<template>
  <div class="weui-panel">
    <div class="weui-cell">
      <div class="weui-cell__bd">
        <p>{{ item.rentPayMonth }}房租</p>
      </div>
      <div v-bind:class="domClass" class="weui-cell__ft">{{ item.orderStatus }}</div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell_bd">
        <p>支付时间：{{ item.payDate }}</p>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__ft money">合计：{{ item.rentAmount }}</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'historyItem',
    computed: {
      domClass() {
        const orderStatus = this.item.orderStatus
        let domClass = ''
        if (orderStatus === '转出成功') {
          domClass = 'status-done'
        } else if (orderStatus === '处理中') {
          domClass = 'status-yet'
        }
        return domClass
        // let domClass = ''
        // let domText = ''
        // if (status === '1') {
        //   domClass = 'status-done'
        //   domText = '转出成功'
        // } else if (status === '8') {
        //   domClass = 'status-yet'
        //   domText = '处理中'
        // }
        // return {
          // domClass,
          // domText
        // }
      }
    },
    props: {
      item: {
        type: Object,
        required: true
      }
    }
  }
</script>
<style lang="less" scoped>
  .weui-panel {
    border-radius: 2px;
  }

  .weui-cell__ft {
    font-size: 14px;
  }


  .status-yet {
    color: #ff624c
  }

  .status-done {
    color: #808080
  }

  .money {
    width: 100%;
    color: #212121;
  }
</style>
